<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <h3>如何定义函数</h3>


    <script>
        // 三种方式：
        // 1.0  直接量（分清除先后顺序）
        // console.log(sayHello); // undefined
        // sayHello();// 报错
        var sayHello = function(){
            console.log("hello world 123");
        }
        // sayHello();// 调用函数


        // 2.0 关键字 function (定义函数不需要先后顺序)
        // console.log(speak);// 函数体 预解析,提前解析
        // speak();
        function speak() { 
            console.log("hi , xiaoming 456");
        }
        // speak();

        // 3.0 构造函数表达式 (不推荐的写法)
        // Function 它是构造函数(首字母大写)
        // var run = new Function("表达式");
        var run = new Function("console.log('good afternoon 789')");
        // run();// 调用函数



        // 总结:
            // 在定义函数的时候,需要注意所采用的关键字
            // 如果是var的方式,需要先定义,后调用函数
            // 如果是function的方式,可以提前调用
        // 以上代码哪些是函数
        // sayHello ， speak ， run
        // 函数需要被调用，代码块的内容，才会被执行（函数不调用，代码不执行）

        // 如何调用函数？
        // sayHello()





        // 备注:
        // 变量声明提升
        // 实质上就是一种语法缺陷
        // console.log(a);// undefined
        // var a = "abc";
        // console.log(a);// abc


        function template() {
            str +="<div></div>";
        }
        template();

        document.write(str);
    </script>
</body>
</html>